<form class="ui form" *ngIf="project && pipeline && stage">
    <div class="field">
        <div class="inline fields">
            <div class="eight wide field">
                <label>{{'common_name' | translate}}</label>
                <input type="text" name="stageName" [(ngModel)]="stage.name" (keydown)="stage.hasChanged = true"
                    *ngIf="pipeline.permission === permissionEnum.READ_WRITE_EXECUTE">
                <div class="inline" *ngIf="pipeline.permission !== permissionEnum.READ_WRITE_EXECUTE">{{stage.name}}
                </div>
            </div>
            <div class="eight wide field">
                <div class="ui checkbox">
                    <input type="checkbox" id="enabled_stage_{{stage.id}}" name="enabled" [(ngModel)]="stage.enabled"
                        (change)="stage.hasChanged = true"
                        [disabled]="pipeline.permission !== permissionEnum.READ_WRITE_EXECUTE">
                    <label for="enabled_stage_{{stage.id}}">{{ 'common_enable' | translate }}</label>
                </div>
            </div>
        </div>
        <div class="field">
            <app-conditions *ngIf="!loading" [project]="project"
                [readonly]="pipeline.permission < permissionEnum.READ_WRITE_EXECUTE"
                [triggerConditions]="triggerConditions" [(conditions)]="stage.conditions">
            </app-conditions>
            <div class="ui active centered inline loader" *ngIf="loading"></div>
        </div>
    </div>
</form>
